<template>
    <div class="logincont">
        <div class="lofinChunk">
            <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" class="login-form">
                <h3 class="title">BestPay go</h3>
                <div class="topchange">
                    <div :class="{ 'active': isAccount }" @click="isAccount = true">
                        账号登录
                    </div>
                    <div :class="{ 'active': !isAccount }" @click="isAccount = false">
                        邮箱登录
                    </div>
                </div>
                <template v-if="isAccount">
                    <el-form-item prop="username">
                        <el-input v-model="loginForm.username" type="text" placeholder="accountnumber">
                            <!-- <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> -->
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="loginForm.password" type="password" auto-complete="off"
                            placeholder="password">
                            <!-- @keyup.enter.native="handleLogin" -->
                            <!-- <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> -->
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="code" v-if="captchaEnabled">
                        <el-input v-model="loginForm.code" auto-complete="off" placeholder="Captcha" style="width: 63%">
                            <!-- <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" /> -->
                        </el-input>
                        <div class="login-code">
                            <!-- <img :src="codeUrl" @click="getCode" class="login-code-img" /> -->
                        </div>
                    </el-form-item>
                    <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">remember
                        password</el-checkbox>
                    <el-form-item style="width:100%;">
                        <el-button :loading="loading" size="default" type="primary" style="width:100%;"
                            @click.native.prevent="handleLogin">
                            <span v-if="!loading">register</span>
                            <span v-else>be logging in ... </span>
                        </el-button>
                        <!-- <div style="float: right;" v-if="register">
                        <router-link class="link-type" :to="'/register'">立即注册</router-link>
                    </div> -->
                    </el-form-item>
                </template>
                <template v-else>
                    <el-form-item prop="username">
                        <el-input v-model="loginForm.username" type="text" placeholder="邮箱">
                            <!-- <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> -->
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="邮箱验证码">
                            <!-- @keyup.enter.native="handleLogin" -->
                            <!-- <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> -->
                        </el-input>
                    </el-form-item>
                    <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">remember
                        password</el-checkbox>
                    <el-form-item style="width:100%;">
                        <el-button :loading="loading" size="default" type="primary" style="width:100%;"
                            @click.native.prevent="handleLogin">
                            <span v-if="!loading">register</span>
                            <span v-else>be logging in ... </span>
                        </el-button>
                        <!-- <div style="float: right;" v-if="register">
                        <router-link class="link-type" :to="'/register'">立即注册</router-link>
                    </div> -->
                    </el-form-item>
                </template>
            </el-form>



        </div>
    </div>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue';

let loginForm = reactive({
    username: "",
    password: "",
    rememberMe: false,
    code: ""
})
onMounted(() => {
    //     console.log(import.meta.env.VITE_BASE_API,"1111");
    // //    条件判断
    //     if (import.meta.env.VITE_DEBUG === 'true') {
    //     console.log('Debug mode enabled');
    //     }
})
let loginRules = ref({
    username: [
        { required: true, trigger: "blur", message: "Please enter your account number" }
    ],
    password: [
        { required: true, trigger: "blur", message: "please enter your password" }
    ],
    code: [{ required: true, trigger: "change", message: "Please enter Captcha" }]
})
let loading = ref(false)
// 验证码开关
let captchaEnabled = ref(true)
// 账号密码和邮箱的切换isAccount是否是账户密码登录
let isAccount = ref(false)

const handleLogin = async () => {
    console.log(loginForm);

    //   try {
    //     loading.value = true
    //     // 1. 表单验证
    //     await loginFormRef.value.validate()
    //     // // 2. 调用登录接口
    //     // await userStore.login(loginForm)
    //     // // 3. 跳转到首页
    //     // router.push('/')
    //     // ElMessage.success('登录成功')
    //   } catch (error) {
    //     console.error('登录失败:', error)
    //   } finally {
    //     loading.value = false
    //   }
}
const loginFormRef = ref(null)


function getCode() {
    getCodeImg().then(res => {
        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
        if (this.captchaEnabled) {
            this.codeUrl = "data:image/gif;base64," + res.img
            this.loginForm.uuid = res.uuid
        }
    })
}
function getCookie() {
    const username = Cookies.get("username")
    const password = Cookies.get("password")
    const rememberMe = Cookies.get('rememberMe')
    this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password: password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
    }
}
</script>
<style lang="scss" scoped>
.logincont {
    width: 100%;
    height: 100vh;
    background: url("../assets/images/bj.png") no-repeat center center;
    background-size: cover;
    position: relative;

    .lofinChunk {
        width: 400px;
        height: 300px;
        background-color: #fff;
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 20px;
    }

    .title {
        // margin: 0px auto 30px auto;
        text-align: center;
        color: #707070;
    }

    .topchange {
        display: flex;
        justify-content: center;
        gap: 30px;
        margin: 15px 0 25px;

        div {
            cursor: pointer;
            color: #999;
            font-size: 14px;
            position: relative;
            padding-bottom: 5px;
            transition: all 0.3s;

            &.active {
                color: #409EFF;
                font-weight: bold;

                &::after {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 2px;
                    background: #409EFF;
                }
            }

            &:hover {
                color: #409EFF;
            }
        }
    }

    .login-form {
        border-radius: 6px;
        background: #ffffff;
        width: 400px;
        padding: 25px 25px 5px 25px;
        z-index: 1;

        .el-input {
            height: 38px;

            input {
                height: 38px;
            }
        }

        .input-icon {
            height: 39px;
            width: 14px;
            margin-left: 2px;
        }
    }

    .login-tip {
        font-size: 13px;
        text-align: center;
        color: #bfbfbf;
    }

    .login-code {
        width: 33%;
        height: 38px;
        float: right;

        img {
            cursor: pointer;
            vertical-align: middle;
        }
    }

    .el-login-footer {
        height: 40px;
        line-height: 40px;
        position: fixed;
        bottom: 0;
        width: 100%;
        text-align: center;
        color: #fff;
        font-family: Arial;
        font-size: 12px;
        letter-spacing: 1px;
    }

    .login-code-img {
        height: 38px;
    }
}
</style>